<template>
  <view class="main-container">
		<!--  头部搜索栏 -->
	<!-- 	<view class="head">
			<view class="search_view">
				<input class="search" v-model="searchValue" placeholder="请输入关键字搜索" />
				<button size="mini" @click="searchPolicy()"></button>
				<image src="http://113.142.144.25:9301/statics/appimg/icon_search_btn_new.png" 
					style="height: 30rpx;width:30rpx;padding: 20rpx;" @click="searchPolicy()"></image>
			</view>
		</view> -->
		<!--导航栏
		<!-- <orderTabBar :tabList="tabList" @clickTabBar="clickTabBar" class="tab-bar" :show-line="true" /> -->
		<u-tabs style="width: 100%" :list="patentType" @click="click"></u-tabs>
		<u-tabs style="width: 100%" :list="patenteeType" @click="click"></u-tabs>
		<u--form :model="queryParams">
			<u-form-item>
				<u--input v-model="queryParams.name" placeholder="请输入关键字搜索"></u--input>
				<u-button slot="right" text="搜索" type="primary" @click="goSearch"></u-button>
			</u-form-item>
		</u--form>
		<!--订单列表-->
		<scroll-view class="policy_list" scroll-y="true" :style="'height:100vh'" enable-flex  @scrolltolower="scrollToLower()">
			<!-- 服务机构 -->
			<view>
				<view class="new_machine_item">
					<uni-grid :column="2" :showBorder="false">
						<block v-for="(item,index) in dataList" :key="index">
							<uni-grid-item style="height:260rpx;">
								<view  @click="cgDetail(dataList[index])"
									class="view_item_right">
									<view class="machine_info">
										<text class="machine_lable" style="color: #000000;padding-top: 15rpx; font-size:24rpx;font-weight:700;margin: 0 auto;">{{item.title}}</text>
									</view>
									<view class="machine_info" >
										<view >
											<text class="machine_lable">{{item.inventor}}</text>
											<view>
												<text class="machine_lable">归属城市：{{item.city}}</text>
											</view>
										</view>
									</view>
								</view>
							</uni-grid-item>
						</block>
					</uni-grid>
				</view>
			</view>

		    <view class="no-data" v-if="dataList.length == 0" @click="getdataList">
					{{noData}}
		    </view>
		</scroll-view>
	  </view>
</template>

<script>
	
	import orderTabBar from '@/wxcomponents/tab_bar.vue';
	import * as achivement from '@/api/achivement/achievement.js'
	import * as data from "@/api/system/dict/data";
	import env from '../../../utils/env';
	import uniGrid from "@/components/uni-grid/components/uni-grid/uni-grid.vue"
	import uniGridItem from "@/components/uni-grid/components/uni-grid-item/uni-grid-item.vue"
	import * as findData from "@/api/finddata.js"
	
	export default {
	  components: {
		orderTabBar,
		uniGrid,
		uniGridItem
	  },
	  data() {
		return {
			noData: '加载中',
		  showPage: false,
		  // 订单列表tab项
		  tabList: [{
			status: '0',
			title: '服务机构'
		  },
		  {
		  	status: '1',
		  	title: '服务人员'
		  },
			{
			  status: '2',
			  title: '服务内容'
			},
		  ],
		  // 当前选择tab项
		  currentIndex: 0,
		  // 当前查询状态
		  currentStatus: '',
		  // 订单列表高度
		  orderHeight: 0,
		  // 是否还有更多数据
		  noMoreData: {},
		  // 订单列表
		  dataList: [],
		  policylevel:'',
		  searchValue:'',
		  jslbList:[],
		  cgTypeList: [],
		  industyList: [],
		  query:{
			  pageSize:10,
			  pageNum:1
		  },
		  total:0,
			patentType:[
				{
					name:'全部',
					value:null,
					type:'patent'
				}
			],
			activePatent:null,
			patenteeType:[
				{
					name:'全部',
					value:null,
					type:'patentee'
				}
			],
			activePatentee:null,
			queryParams:{}
		}
	  },
	  mounted() {
		// let _this = this;
		// const query = uni.createSelectorQuery().in(this);
		// query.select('.tab-bar').boundingClientRect(data => {
		//   _this.tabHeight = data.height
		//   _this.orderHeight = _this.windowHeight-5
		// }).exec();
		this.getdataList()
		this.getDict()
	  },
	  methods: {
			click(item){
				this.dataList = []
				this.query.pageNum = 1
				if(item.type==='patent'){
					this.activePatent = item.value
				}else{
					this.activePatentee = item.value
				}
				this.getdataList()
			},
			goSearch(){
				this.dataList = []
				this.query.pageNum = 1
				this.getdataList()
			},
		// tab切换
		clickTabBar(index, status) {
		  this.currentIndex = index
		  this.currentStatus = status
		  this.dataList = [];
		  this.getdataList()
		},
		getDict(){
			data.getDicts('achievement_chengguo_type').then((res)=>{
				this.cgTypeList = res.data
			})
			data.getDicts('ach_kjcgssgxjslb').then((res)=>{
				this.jslbList = res.data;
			})
			data.getDicts('kjzy_zllx').then((res)=>{
				res.data.forEach(item=>{
					this.patentType.push({
						name:item.dictLabel,
						value:item.dictValue,
						type:'patent'
					})
				})
			})
			data.getDicts('kjzy_zlqrlx').then((res)=>{
				res.data.forEach(item=>{
					this.patenteeType.push({
						name:item.dictLabel,
						value:item.dictValue,
						type:'patentee'
					})
				})
			})
		},
		// 加载订单列表
		getdataList() {
			this.noData = '加载中。。。'
			uni.showLoading({});
			let data = this.query
			if(this.activePatent){
				data.agent = this.activePatent
			}else{
				delete data.agent
			}
			if(this.activePatentee){
				data.agency = this.activePatentee
			}else{
				delete data.agency
			}
			if(this.queryParams.name){
				data.searchValue = this.queryParams.name
			}else{
				delete data.searchValue
			}
			achivement.listPatent(data).then((res)=>{
				res.rows.forEach(v=>{
					this.dataList.push(v)
				})
				this.total = res.total
				if(this.dataList.length===0){
					this.noData = '暂无数据，点击重试'
				}
			})
			uni.hideLoading({})
		},
		// 更新order
		updateOrderInfo(index) {
			let _this = this
			_this.dataList = []
			_this.getdataList()
		},
		// 滑到底部 加载更多
		scrollToLower() {
			if(this.dataList.length<this.total){
				this.query.pageNum = this.query.pageNum + 1;
				this.getdataList();
			}else{
				uni.showToast({
					icon:'none',
					title:"没有更多数据"
				})
			}
		},
		
		cgDetail(item){
			console.log("跳转"+item.id)
			uni.navigateTo({
				url:'/subpages/pages/detail/achivement_detail?id='+ item.id
			})
		},
		searchPolicy(){
			var data = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				searchvalue:this.searchValue
			};
			console.log(this.searchValue)
			findData.getzcg(data).then((res)=>{
				this.dataList = res.rows
			})
		},
	  },
	  computed: {
			
	  }
	}
</script>

<style>
	.main-container {
		width: 100vw;
		height: fit-content;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		background-color: #e6e6e6;
	}
	
	.main-container .tab-bar {
		width: 93%;
		border-radius: 15rpx;
	}
	
	.main-container .order-lists {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	
	.head {
		display: flex;
		width: 93vw;
		margin: 20rpx auto;
		height: 70rpx;
		border-radius: 30rpx;
		background-color: #fff;
		text-align: center;
	}
	
	.search_view{
		margin: 0 auto;
	}
	
	.search {
		height: 40rpx;
		padding-top: 15rpx;
		font-size: 25rpx;
		float: left;
	}
	
	.no-data {
		width: 100%;
		height: 300rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		margin-top: 100rpx;
	}
	
	.no-data .no-data-img {
		width: 300rpx;
		height: 268rpx;
	}
	
	.policy_list {
		width: 100%;
		height: fit-content;
		padding: 15rpx;
		border-radius: 15rpx;
	}
	
	.policy_item {
		height: 80rpx;
		background-color: #fff;
	}
	
	.policy_title {
		display: -webkit-box;
		margin-top: 50rpx;
		font-size: 30rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow:ellipsis;
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
	}
	
	.publicTime {
		float:left;
		font-size: 26rpx;
		color: #a1a1a1;
		margin-top: 25rpx;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 15rpx;
		margin-bottom: 15rpx;
	}
	
	.new_machine_item{
		height: 180rpx;
		width: 100%;
		padding-left: 25rpx;
		float: left;
	}
	
	.view_item_right{
		height:240rpx;
		width: 89%;
		font-size: 35rpx;
		color: #fff;
/* 		border: #016fb8 1px solid; */
		border-radius: 15rpx;
		text-align: center;
		background-color: #fff;
	/* 	float: left; */
	}
	
	.machine_lable{
		display: -webkit-box;
		color: #000000;
		font-size: 24rpx;
		line-height: 40rpx;
		text-align: left;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}
	
	.machine_info {
		margin: 10rpx 10rpx 10rpx 10rpx;
	}
</style>